<template>
  <view class="codeList">
    <nut-tabs v-model="tabvalue" background="white">
      <template v-slot:titles>
        <view class="tabTags">
          <view @touchstart="send" :class="{active:tabvalue==1}">发货码</view>
          <view @touchstart="get" :class="{active:tabvalue==2}">取货码</view>
        </view>
        <headerSearch :query="query" @queryList="queryList" @search="search" ref="mySearch"></headerSearch>

      </template>
      <nut-tab-pane :pane-key="1" title="发货码" class="tabpane">
        <nut-list key="fa" class="lists" :listData="showList" style="height: calc(100vh - 240rpx);" v-if="showList.length>0">
          <template v-slot="{ item, index }">
            <list-item :item="item" :index="index" :codeType="'1'" @toDial="toDial"></list-item>
          </template>
        </nut-list>
        <view v-else style="height: calc(100vh - 240rpx);background-color: #f5f5f5">
          <view class="container_empty">
            <image mode="aspectFit" src="../../assets/images/index/empty3.png"></image>
            <view class="empty_text">暂无信息</view>
          </view>
        </view>
      </nut-tab-pane>
      <nut-tab-pane :pane-key="2" title="取货码" class="tabpane">
        <nut-list key="shou" class="lists" :listData="showList" style="height: calc(100vh - 240rpx);" v-if="showList.length>0">
          <template v-slot="{ item, index }">
            <list-item :item="item" :index="index" :codeType="'2'" @toDial="toDial"></list-item>
          </template>
        </nut-list>
        <view v-else style="height: calc(100vh - 240rpx);background-color: #f5f5f5">
          <view class="container_empty">
            <image mode="aspectFit" src="../../assets/images/index/empty3.png"></image>
            <view class="empty_text">暂无信息</view>
          </view>
        </view>
      </nut-tab-pane>
    </nut-tabs>
    <dialBranch :show="showTelPopup" :tel="branchTel" :title="'拨打电话'" @close="showTelPopup=false" :show-close="true"></dialBranch>
  </view>
</template>

<script setup lang="ts">
import { defineComponent, getCurrentInstance, reactive, ref } from 'vue';
import Taro, {useDidShow} from "@tarojs/taro";
import headerSearch from './headerSearch.vue'
import listItem from "@/pages/codeList/listItem.vue";
import {$get,$post} from "@/@api";
import useUserInfoStore from "@/store/user";
const userStore = useUserInfoStore();
const tabvalue = ref(1)
const query = ref({
  keywords: "",
  startBillingTime: "",
  endBillingTime: "",
});
const showList = ref([])
const mySearch = ref(null)

//网点电话弹窗
const showTelPopup = ref<boolean>(false)
const branchTel = ref<string>('')
const toDial= async (tel) => {
  if(tel){
    branchTel.value = tel
    showTelPopup.value = true
  }
  else{
    Taro.showToast({
      icon: 'none',
      title: '该网点无联系方式'
    })
  }
}

const queryList = async (item:any) => {
  if(item.start){
    query.value.startBillingTime = item.start + ' 00:00:00'
  }
  else {
    query.value.startBillingTime = ''
  }
  if(item.end){
    query.value.endBillingTime = item.end + ' 23:59:59'
  }
  else {
    query.value.endBillingTime = ''
  }
  search()
}

const search = async () => {
  Taro.showLoading({
    title: '加载中',
  })
  const res: any = await $post(
      "/selfmachine-system/order/getByCode",
      {
        customerCode: userStore.userInfo.customerCode,
        codeType: tabvalue.value==1?'发货码':'取货码',
        ...query.value,
      }
  )
  Taro.hideLoading()
  if (res.data.code == 200) {
    showList.value = res.data.data.map((item)=>{
      return item.branchVo
    })
  }

}

const send = () => {
  tabvalue.value = 1
  showList.value = []
  search()
}
const get = () => {
  tabvalue.value = 2
  showList.value = []
  search()
}


function handleScroll() {
}

useDidShow(()=>{
  search()
})


</script>

<style lang="scss">
// @import "xxx";
// @import url(xxx);
.codeList {
  height: 100%;
  --nut-tabs-horizontal-titles-height: 208rpx;

  .nut-tabs__list {
    display: block;
  }

  .nut-tabs__titles{
    padding: 0;
  }

  .tabpane {
    background-color: #f5f5f5;
    padding: 16rpx 24rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .tabTags {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 88rpx;
    border-bottom: 2rpx solid #f5f5f5;
    >view {
      width: 50%;
      font-size: 28rpx;
      color: #666;
      line-height: 88rpx;
      text-align: center;
      position: relative;
      &.active {
        font-size: 32rpx;
        color: #0966ff;
        &:before {
          content: '';
          position: absolute;
          width: 48rpx;
          height: 4rpx;
          top: 72rpx;
          left: calc(50% - 24rpx);
          background-color: #0966ff;
        }
      }
    }
  }

  .lists {
    box-sizing: border-box;
    width: 100%;
  }
}
.container_empty {
  margin-top: 280rpx;
  text-align: center;

  image {
    width: 300rpx;
    height: 300rpx;
  }
  .empty_text {
    font-size: 32rpx;
    color: #999;
  }

}
</style>
